<template>
  <view class="content jlogin">
    <view class="reg" @tap="to_login">已有账号</view>

    <view class="clear"></view>

    <view class="bt">
      <view class="bt01">
        注册墨斗
      </view>
      <view class="bt02"> </view>
    </view>
    <view class="clear"></view>

    <view class="input-group ji">
      <view class="ji_t">手机号码</view>
      <view class="input-row ">
        <m-input
          class="m-input"
          type="number"
          clearable
          focus
          v-model="account"
          maxlength="11"
          placeholder="请输入手机号码"
          @input="onKeyInput"
        ></m-input>
      </view>

      <view class="input-row">
        <input
          type="number"
          placeholder="请输入验证码"
          class="input_c"
          v-model="yzm"
          @input="onKeyInput"
        />
        <view
          class="input_r"
          :class="{ active: !disableCodeBtn }"
          @tap="sendCode"
          >{{ codeBtn.text }}</view
        >
      </view>

      <!-- <view class="ji_t">登录密码</view> -->
      <view class="input-row">
        <m-input
          type="password"
          displayable
          v-model="password"
          maxlength="16"
          placeholder="请设置登录密码"
          @input="onKeyInput"
        ></m-input>
        <view class="cw " :class="{ hide: !mparameterw }">
          <view class="info">
            <span>密码为6-16个字符，且必须包含数字，字母，符号中的任意2种</span>
            <view class="nav nav-border"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-row" :class="{ not: !canclick }">
      <button
        type="primary"
        class="primary"
        @tap="bindLogin"
        :loading="isLoading"
      >
        立即注册
      </button>
    </view>

    <view class="xy">
      轻触“注册”即表示已同意<view class="xy2" @tap="navito"
        >《墨斗用户服务协议》</view
      >
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import service from '../../service.js';
let base64 = require('../../common/js/base64.js').Base64;
import { mapState, mapMutations } from 'vuex';
import mInput from '../../components/m-input.vue';

export default {
  components: {
    mInput,
  },
  data() {
    return {
      repeat_click: true,
      providerList: [],
      hasProvider: false,
      account: '',
      yzm: '',
      password: '',
      verifyCode: '',
      positionTop: 0,
      isDevtools: false,
      seconds: 60,
      disableCodeBtn: true,
      codeBtn: {
        text: '获取验证码',
        waitingCode: false,
        count: this.seconds,
      },
      isLoading: false,
      canclick: false,
      mparameterw: false,
    };
  },
  computed: {},
  methods: {
    navito() {
      uni.navigateTo({
        url:
          '../reg/vw?title=墨斗用户服务协议&url=https://mlito.com/md/xy.html',
      });
    },
    // 判断按钮高亮
    onKeyInput: function(event) {
      console.log(this.account, this.yzm, this.password);
      this.mparameterw = false;
      if (this.account != '' && this.yzm != '' && this.password != '') {
        this.canclick = true;
      } else {
        this.canclick = false;
      }
    },

    // 发送验证码
    sendCode: function() {
      if (this.account.length < 1) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '请填写手机号',
        });
        return;
      }

      if (this.account.length != 11) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '手机号码填写有误',
        });
        return;
      }

      if (this.disableCodeBtn == true) {
        request({
          url: '/ucenter/opt/register',
          data: {
            // appId: "5efe4be4d9eff40a",
            username: this.account,
            // scene: "register"
          },

          method: 'POST',
          success: openIdRes => {
            console.log(openIdRes);

            if (openIdRes.data.code == '00000') {
              this.repeat_click = true;
              uni.showToast({
                title: openIdRes.data.msg,
                icon: 'none',
              });

              uni.setStorageSync('uuid', openIdRes.data.data);

              this.codeBtn.waitingCode = true;
              this.codeBtn.count = this.seconds;
              this.codeBtn.text = this.codeBtn.count + 's';
              this.disableCodeBtn = false;

              let countdown = setInterval(() => {
                this.codeBtn.count--;
                this.codeBtn.text = this.codeBtn.count + 's';
                if (this.codeBtn.count < 0) {
                  clearInterval(countdown);
                  this.codeBtn.text = '重新发送';
                  this.codeBtn.waitingCode = false;
                  this.disableCodeBtn = true;
                }
              }, 1000);
            } else {
              this.repeat_click = true;
              uni.showToast({
                title: openIdRes.data.msg,
                icon: 'none',
              });
            }
          },
          fail: () => {
            this.repeat_click = true;
            uni.showToast({
              title: '服务器开小差，请稍后~',
              icon: 'none',
            });
            return false;
          },
        });
      }
    },

    // 注册
    bindLogin() {
      if (this.account.length != 11) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '手机号码填写有误',
        });
        return;
      }

      if (this.yzm.length < 1) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '请填写短信验证码',
        });
        return;
      }

      if (this.password.length < 1) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '请填写密码',
        });
        return;
      }

      //对象的方式创建
      var reg = new RegExp(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/);
      //字符串
      var str = this.password;
      //调用方法验证字符串是否匹配
      var flag = reg.test(str);
      console.log(flag); //true

      if (!flag) {
        this.mparameterw = true;
        return false;
      }

      this.isLoading = true;

      request({
        url: '/ucenter/register',
        data: {
          // appId: "5efe4be4d9eff40a",
          username: this.account,
          verifyCode: this.yzm,
          password: this.password,
          // scene: "register"
        },

        method: 'POST',
        success: openIdRes => {
          console.log(openIdRes);

          // 已经授权了、查询到用户的数据了
          if (openIdRes.data.code == '00000') {
            this.repeat_click = true;
            uni.showToast({
              title: '注册成功',
            });

            uni.navigateTo({
              url: '../login/login',
            });

            //验证码正确 验证登陆
            // request({

            // 	url: '/passport/v1/general/auth/register',
            // 	data: {
            // 		appId: "5efe4be4d9eff40a",
            // 		type: 1,
            // 		terminal: uni.getStorageSync("xt").platform.toUpperCase(),
            // 		username: this.account,
            // 		password: base64.encode(this.password),
            // 		verifyCode: this.yzm,
            // 		uuid: uni.getStorageSync("uuid")
            // 	},

            // 	method: 'POST',
            // 	success: openIdRes => {
            // 		console.log(openIdRes);
            // 		// 隐藏loading
            // 		this.isLoading = false;

            // 		// 已经授权了、查询到用户的数据了
            // 		if (openIdRes.data.success == true) {
            // 			// 用户信息写入缓存
            // 								this.repeat_click = true;
            ////uni.showToast({
            // 				title: '注册成功'
            // 			})

            // 			uni.navigateTo({
            // 				url: '../login/login',
            // 			});

            // 			// uni.setStorageSync('user_id', openIdRes.data.system.u_id);
            // 			// uni.setStorageSync('user_nm', openIdRes.data.system.u_nickName);
            // 			// uni.setStorageSync('user_fa', openIdRes.data.system.u_avatarUrl);
            // 			// uni.setStorageSync('user_nu', openIdRes.data.system.u_regtime);
            // 			// 然后跳回原页面

            // 			if (this.pageOption.backtype == 1) {
            // 				uni.redirectTo({
            // 					url: this.pageOption.backpage
            // 				})
            // 			} else {
            // 				uni.switchTab({
            // 					url: this.pageOption.backpage
            // 				})
            // 			}
            // 		} else {
            // 								this.repeat_click = true;
            //uni.showToast({
            // 				title: openIdRes.data.msg,
            // 				icon: 'none'
            // 			});
            // 		}
            // 	},
            // 	fail: () => {
            // 							this.repeat_click = true;
            //uni.showToast({
            // 			title: '服务器开小差，请稍后~',
            // 			icon: 'none'
            // 		});
            // 		return false;
            // 	}
            // });
          } else {
            // 验证码错误

            this.repeat_click = true;
            uni.showToast({
              title: openIdRes.data.msg,
              icon: 'none',
            });
            this.isLoading = false;
          }
        },
        fail: () => {
          this.repeat_click = true;
          uni.showToast({
            title: '服务器开小差，请稍后~',
            icon: 'none',
          });
          return false;
        },
      });
    },

    // 跳转
    to_login() {
      uni.navigateTo({
        url: '../login/login',
      });
    },

    ...mapMutations(['login']),

    initPosition() {
      /**
       * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
       * 反向使用 top 进行定位，可以避免此问题。
       */
      this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
    },
  },
  onReady() {
    console.log('1111', uni.getStorageSync('xt').platform.toUpperCase());
    this.initPosition();
  },
};
</script>

<style>
.cw {
  width: auto;
  height: auto;
  position: absolute;
  bottom: 80rpx;
  left: 80rpx;
  display: block;
}

.info {
  position: relative;
  width: 450rpx;
  height: auto;

  background: rgba(0, 0, 0, 0.802989);
  border-radius: 12rpx;

  box-shadow: 2rpx 4rpx 5rpx rgba(0, 0, 0, 0.4);

  display: block;
  float: left;
  text-align: center;
}

.info span {
  font-size: 28rpx;
  line-height: 36rpx;
  display: block;
  float: left;
  width: 90%;
  text-align: center;
  padding: 20rpx 5%;

  color: #ffffff;
}

.nav {
  position: absolute;
  left: 45%;
  bottom: -49rpx;
  overflow: hidden;
  float: left;
  width: 0;
  height: 0;
  border-width: 25rpx;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  opacity: 0.9;
}

.j-boxsbj {
  width: 97%;
  padding: 0 1.5%;
  height: auto;
  display: block;
  float: left;
  position: relative;
  background: url(../../static/img/c.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.j-boxsbjt {
  width: 100%;
  height: 33rpx;
  display: block;
  float: left;
}

.j-boxsbjf {
  width: 100%;
  height: 23rpx;
  display: block;
  float: left;
}

.j-boxs {
  width: 550rpx;
  height: auto;
  display: none;
  float: left;
  margin: 0;
  position: absolute;
  left: 35rpx;
  top: 60rpx;
  z-index: 99999;
  border-radius: 8px;
}

.j-box {
  width: 100%;
  height: 90rpx;
  display: block;
  line-height: 90rpx;
  float: left;
}

.j-box view {
  width: 90%;
  height: 90rpx;
  display: block;
  line-height: 90rpx;
  float: left;
  margin: 0 5%;
  border-bottom: 1px solid #dddddd;
}

.j-box text {
  width: 80%;
  height: 90rpx;
  display: block;
  line-height: 90rpx;
  float: left;
  font-size: 32rpx;
  color: #000000;
}

.j-box image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  margin: 27rpx 30rpx 0 0;
  float: right;
}

.j-box:active {
  background: #eeeeee;
}

.reg {
  width: auto;
  height: auto;
  font-size: 32rpx;
  color: #256aff;
  float: right;
  display: block;
  margin: 100rpx 50rpx 0 0;
  padding: 10rpx;
  text-align: right;
}

.bt {
  width: auto;
  height: auto;
  float: left;
  display: block;
  margin: 60rpx 0rpx 0 60rpx;
}

.bt01 {
  width: auto;
  height: auto;
  display: block;
  font-size: 68rpx;
  color: #000000;
  margin: 0rpx 0rpx 40rpx 0rpx;
}

.bt02 {
  width: auto;
  height: auto;
  display: block;
  font-size: 36rpx;
  color: #000000;
}

.ji {
  width: 630rpx;
  height: auto;
  display: block;
  float: left;
  margin: 26rpx 60rpx 0rpx;
}

.ji_t {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 20rpx;
  color: #999999;
  margin: 0 0 10rpx 0;
  visibility: hidden;
}

.ji .input-row {
  width: 100%;
  height: 60rpx;
  display: block;
  float: left;
  border-bottom: 1px solid #dddddd;
  margin: 0 0 40rpx 0;
  position: relative;
}

.ji .m-input-input {
  width: 90%;
  height: 40rpx;
  display: block;
  float: left;
  margin: 0 0 40rpx 0;
  font-size: 32rpx;
  color: #000000;
}

.ji .m-input-view {
  width: 100%;
  height: auto;
  display: block;
  float: left;
}

.jwx {
  width: 630rpx;
  height: auto;
  display: block;
  float: left;
  position: fixed;
  left: 60rpx;
  bottom: 90rpx;
  background: #ffffff;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  border-radius: 8rpx;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
  line-height: 56rpx;
  height: 56rpx;
  padding: 19rpx 0;
  box-sizing: content-box;
}

.jwx image {
  width: 56rpx;
  height: 56rpx;
  float: none;
  display: inline-block;
  margin: 0 10rpx -15rpx 0;
}

.jwx span {
  width: auto;
  height: 56rpx;
  float: none;
  display: inline-block;
  line-height: 56rpx;
}

.jwx:active {
  background: #f5f5f5;
  border: 1px solid #dddddd;
}

.xy {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 30rpx 0 0;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}

.xy2 {
  color: #256aff;
  display: inline;
}

.jlogin .not uni-button {
  opacity: 0.5;
}

.input {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
}

.input_l {
  width: 166rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 24rpx 10rpx 24rpx 30rpx;
  font-size: 34rpx;
  color: #000000;
  line-height: 42rpx;
}

.input_c {
  width: 330rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 0rpx 10rpx 40rpx 0rpx;
  font-size: 32rpx;
  color: #000000;
  line-height: 42rpx;
}

.input_r {
  width: auto;
  height: 42rpx;
  display: block;
  float: right;
  margin: 0rpx 30rpx 40rpx 0rpx;
  font-size: 32rpx;
  color: #256aff;
  line-height: 42rpx;
  background: none !important;
  padding: 0;
}

.input_r:active {
  color: #256aff;
  background: none !important;
}

.input_r.active {
  color: rgb(176, 173, 176);
}
</style>
